<template>
    <div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav slimscrollsidebar">
            <div class="sidebar-head">
                <h3>
                    <span class="fa-fw open-close">
                        <i style="font-size: 28px !important;" class="fif fif-menu hidden-xs"></i>
                        <i class="ti-close visible-xs"></i>
                    </span>
                    <span class="hide-menu">Funkey</span></h3>
            </div>
              <ul class="nav" id="side-menu">
                <li>
                    <router-link to="/dashboard" class="waves-effect">
                        <i class="fif fif-dashboard1 fa-fw" data-icon="v"></i>
                        <span class="hide-menu"> Dashboard</span>
                    </router-link>
                </li>
                <li>
                    <a href="javascript:void(0);" class="waves-effect">
                        <i class="fif fif-house2 fa-fw"></i>
                        <span class="hide-menu">Room<span class="fif fif-arrow-down arrow"></span></span>
                    </a>
                    <ul class="nav nav-second-level">
                        <router-link to="/physical" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-house1 fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Physical Room</span></a>
                        </router-link>
                        <router-link to="/PhysicalRoomListing" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-house1 fa-fw" data-icon="v"></i>
                                <span class="hide-menu">API Listing</span></a>
                        </router-link>
                        <router-link to="/PhysicalRoomListingDescription" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-house1 fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Listing Description</span></a>
                        </router-link>
                        <router-link to="/PhysicalRoomAmenityCategory" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-house1 fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Amenity Category</span></a>
                        </router-link>
                        <router-link to="/PhysicalRoomGuestControls" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-house1 fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Guest Controls</span></a>
                        </router-link>
                        <router-link to="/PhysicalRoomGuestExpectation" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-house1 fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Guest Expectation</span></a>
                        </router-link>
                        <router-link to="/PhysicalRoomBookingSettings" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-house1 fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Booking Settings</span></a>
                        </router-link>
                        <router-link to="/PhysicalRoomAvailabilityRule" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-house1 fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Availability Rule</span></a>
                        </router-link>
                        <router-link to="/PhysicalRoomSeasonalMinNights" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-house1 fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Seasonal Min Night</span></a>
                        </router-link>
                        <router-link to="/PhysicalRoomPricingSetting" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-house1 fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Price Settings</span></a>
                        </router-link>
                        <router-link to="/logical" tag="li">
                            <a  href="javascript:void(0);">
                                <i class="fif fif-house fa-fw"></i>
                                <span class="hide-menu">Logical Room</span>
                            </a>
                        </router-link>
                        <router-link to="/PhysicalRoomMedia" tag="li">
                            <a  href="javascript:void(0);">
                                <i class="fif fif-tip fa-fw"></i>
                                <span class="hide-menu">Physical Room Media</span>
                            </a>
                        </router-link>
                        <router-link to="/PhysicalRoomGallery" tag="li">
                            <a  href="javascript:void(0);">
                                <i class="fif fif-tip fa-fw"></i>
                                <span class="hide-menu">Physical Room Photos</span>
                            </a>
                        </router-link>
                        <router-link to="/events" tag="li">
                            <a  href="javascript:void(0);">
                                <i class="fif fif-calendar fa-fw"></i>
                                <span class="hide-menu">All Events</span>
                            </a>
                        </router-link>
                        <router-link to="/PhysicalRoomServiceInfo" tag="li">
                            <a  href="javascript:void(0);">
                                <i class="fif fif-tip fa-fw"></i>
                                <span class="hide-menu">Physical Room ServiceInfo</span>
                            </a>
                        </router-link>

                      <router-link to="/PhysicalRoomListing-V2" tag="li">
                        <a href="javascript:void(0);" class="waves-effect">
                          <i class="fif fif-house1 fa-fw" data-icon="v"></i>
                          <span class="hide-menu">Physical Room Listing V2</span></a>
                      </router-link>

                      <router-link to="/PhysicalRoomReviews" tag="li">
                        <a href="javascript:void(0);" class="waves-effect">
                          <i class="fif fif-house1 fa-fw" data-icon="v"></i>
                          <span class="hide-menu">PhysicalRoomReviews</span></a>
                      </router-link>

                      <router-link to="/HourseStatusOnCalendar" tag="li">
                        <a  href="javascript:void(0);">
                          <i class="fif fif-tip fa-fw"></i>
                          <span class="hide-menu">HourseStatus On Calendar</span>
                        </a>
                      </router-link>

                      <router-link to="/PriceSettingOnCalendar" tag="li">
                        <a  href="javascript:void(0);">
                          <i class="fif fif-tip fa-fw"></i>
                          <span class="hide-menu">Price Setting On Calendar</span>
                        </a>
                      </router-link>

                      <router-link to="/NewHourseSourceAdd" tag="li">
                        <a  href="javascript:void(0);">
                          <i class="fif fif-tip fa-fw"></i>
                          <span class="hide-menu">New Hourse Source Add</span>
                        </a>
                      </router-link>
                      <!--
                      <router-link to="/PriceSettingOnCalendar1" tag="li">
                        <a  href="javascript:void(0);">
                          <i class="fif fif-tip fa-fw"></i>
                          <span class="hide-menu">Price Setting On Calendar1</span>
                        </a>
                      </router-link>
                      -->
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);" class="waves-effect">
                        <i class="fif fif-order1 fa-fw"></i>
                        <span class="hide-menu">Order<span class="fif fif-arrow-down arrow"></span></span>
                    </a>
                    <ul class="nav nav-second-level">
                        <router-link to="/order" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-order fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Order List</span>
                            </a>
                        </router-link>
                        <router-link to="/insertorder" tag="li">
                            <a  href="javascript:void(0);">
                                <i class="fif fif-add-order fa-fw"></i>
                                <span class="hide-menu">Insert Order</span>
                            </a>
                        </router-link>
                        <router-link to="/GuestRegistration" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-order fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Guest Registration List</span>
                            </a>
                        </router-link>
                        <router-link to="/GuestRegistrationThailand" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-order fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Thailand Guest Registration List</span>
                            </a>
                        </router-link>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);" class="waves-effect">
                        <i class="fif fif-group fa-fw"></i>
                        <span class="hide-menu">OEM<span class="fif fif-arrow-down arrow"></span></span>
                    </a>
                    <ul class="nav nav-second-level">
                        <router-link to="/company" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-company fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Company</span>
                            </a>
                        </router-link>
                        <router-link to="/host" tag="li">
                            <a  href="javascript:void(0);">
                                <i class="fif fif-user fa-fw"></i>
                                <span class="hide-menu">Host</span>
                            </a>
                        </router-link>
                        <router-link to="/AirbnbUser" tag="li">
                            <a  href="javascript:void(0);">
                                <i class="fif fif-user fa-fw"></i>
                                <span class="hide-menu">Airbnb User</span>
                            </a>
                        </router-link>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);" class="waves-effect">
                        <i class="fif fif-broom fa-fw"></i>
                        <span class="hide-menu">Okumasan<span class="fif fif-arrow-down arrow"></span></span>
                    </a>
                    <ul class="nav nav-second-level">
                        <router-link to="/OkumasanCleaner" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-cleaner fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Okumasan Cleaner List</span>
                            </a>
                        </router-link>
                        <router-link to="/OkumasanOrder" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-orders fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Okumasan Order List</span>
                            </a>
                        </router-link>
                        <router-link to="/deliveryorder" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-orders fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Delivery Order List</span>
                            </a>
                        </router-link>
                        <router-link to="/otherexpenses" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-other-expense fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Other Expense List</span>
                            </a>
                        </router-link>
                        <router-link to="/recurringexpense" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-other-expense fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Recurring Expense List</span>
                            </a>
                        </router-link>
                        <router-link to="/ical2clean" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-calendar1 fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Check Okumasan Order</span>
                            </a>
                        </router-link>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);" class="waves-effect">
                        <i class="fif fif-notification1 fa-fw"></i>
                        <span class="hide-menu">Notifications<span class="fif fif-arrow-down arrow"></span></span>
                    </a>
                    <ul class="nav nav-second-level">
                        <router-link to="/issues/AUTO_MAIL" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-notification-issue fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Issues</span></a>
                        </router-link>
                        <router-link to="/checklist" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-check_list-border fa-fw" data-icon="v"></i>
                                <span class="hide-menu">CheckList</span></a>
                        </router-link>
                        <router-link to="/duplicateorder" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-content-duplicate fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Duplicate Order</span>
                            </a>
                        </router-link>
                        <router-link to="/duplicateical" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-calendar1 fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Duplicate Ical</span>
                            </a>
                        </router-link>
                        <router-link to="/ical2order" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-playlist-remove fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Not-Matched Order</span>
                            </a>
                        </router-link>
                        <router-link to="/order2ical" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-calendar-remove fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Not-Matched Ical</span>
                            </a>
                        </router-link>
                        <router-link to="/checkstatus" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-cc-check-square fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Check Order Status</span></a>
                        </router-link>
                        <router-link to="/checkbill" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-playlist-check fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Check Bill</span></a>
                        </router-link>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);" class="waves-effect">
                        <i class="fif fif-big-data fa-fw"></i>
                        <span class="hide-menu">Big Data<span class="fif fif-arrow-down arrow"></span></span>
                    </a>
                    <ul class="nav nav-second-level">
                        <router-link to="/overview" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-dashboard fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Overview</span>
                            </a>
                        </router-link>
                        <router-link to="/occupancy" tag="li">
                            <a href="javascript:void(0);" class="waves-effect" >
                                <i class="fif fif-chart-occupancy fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Occupancy</span>
                            </a>
                        </router-link>
                        <router-link to="/ordertrend" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-chart fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Order Trend</span>
                            </a>
                        </router-link>
                        <router-link to="/profitforecast" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-profit fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Profit Forecast</span>
                            </a>
                        </router-link>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);" class="waves-effect">
                    <i class="fif fif-chat1 fa-fw"></i>
                    <span class="hide-menu">Chat<span class="fif fif-arrow-down arrow"></span></span></a>
                    <ul class="nav nav-second-level">
                        <router-link :to="box.to" tag="li" v-for="(box, index) in mailbox" :key="box.name">
                            <a href="javascript:void(0);" class="waves-effect"
                               :class="{'active': $route.params.mailbox && $route.params.mailbox.toLowerCase().indexOf(box.name.toLowerCase()) != -1}">
                                <i class="fif fif-chat fa-fw" data-icon="v"></i>
                                <span class="hide-menu">{{box.name}}</span>
                                <span v-if="$store.state.overview" class="label label-rouded label-danger pull-right" style="padding: 4px 12px 3px;">
                                    {{$store.state.overview.new_mail_num[index]}}
                                </span>
                            </a>
                        </router-link>
                        <li :key="'chatgroup' + key"  v-for="(value, key) in chatGroups">
                            <a href="javascript:void(0)" class="waves-effect"
                               :class="{'active': $route.params.mailbox && $route.params.mailbox.toLowerCase() == key.toLowerCase()}">
                                <i class="fif fif-group-tag fa-fw"></i>
                                <span class="hide-menu">{{key}}</span>
                                <span class="fif fif-arrow-down arrow"></span>
                            </a>
                            <ul class="nav nav-third-level">
                                <router-link :to="`/chat/${key}`" tag="li">
                                    <a href="javascript:void(0);" class="waves-effect"
                                       :class="{'active': $route.params.mailbox
                                       && $route.params.mailbox.toLowerCase() == key.toLowerCase()
                                       && (!$route.query.search)
                                       }"
                                    >
                                        <i class="fif fif-flag fa-fw" data-icon="v"></i>
                                        <span class="hide-menu">All</span>
                                    </a>
                                </router-link>
                                <router-link v-for="item in value" :key="item" :to="`/chat/${key}?search=${item}`" tag="li">
                                    <a href="javascript:void(0);" class="waves-effect"
                                       :class="{'active': $route.params.mailbox
                                       && $route.params.mailbox.toLowerCase().indexOf(key.toLowerCase()) != -1 &&
                                          $route.query.search &&　$route.query.search == item
                                       }"
                                    >
                                        <i class="fif fif-flag fa-fw" data-icon="v"></i>
                                        <span class="hide-menu">{{item}}</span>
                                    </a>
                                </router-link>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);" class="waves-effect">
                        <i class="fa-fw fif fif-bill1"></i>
                        <span class="hide-menu">Bill<span class="fif fif-arrow-down arrow"></span></span>
                    </a>
                    <ul class="nav nav-second-level">
                        <router-link to="/transactions" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-transaction fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Transactions</span>
                            </a>
                        </router-link>
                        <router-link to="/invoice" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-invoice fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Invoice</span>
                            </a>
                        </router-link>
                        <router-link to="/cleanerbill" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-cleaner-bill fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Cleaner Bill</span>
                            </a>
                        </router-link>
                        <router-link to="/checkaccounts" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-check-bill fa-fw" data-icon="v"></i>
                                <span class="hide-menu">Check Accounts</span>
                            </a>
                        </router-link>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);" class="waves-effect">
                        <i class="fa-fw fif fif-bill1"></i>
                        <span class="hide-menu">System<span class="fif fif-arrow-down arrow"></span></span>
                    </a>
                    <ul class="nav nav-second-level">
                        <router-link to="/systemsettings" tag="li">
                            <a href="javascript:void(0);" class="waves-effect">
                                <i class="fif fif-check fa-fw" data-icon="v"></i>
                                <span class="hide-menu">System Settings</span>
                            </a>
                        </router-link>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import 'metismenu'
    import 'metismenu/dist/metisMenu.min.css'
    import {mailboxList} from '@/api/chat'
    import config from '@/config'
    export default {
        name: "SliderMenu",
        data() {
            return {
                mailbox: []
            }
        },
        watch: {
            '$route'() {
                this.$nextTick(() => this.setFirstLevelMenuActive())
            }
        },
        created() {
            this.chatGroups = config.CHAT_LABEL_GROUP
        },
        mounted() {
            $("#side-menu").metisMenu()
            $(".slimscrollsidebar").slimScroll({height:"100%",position:"left",size:"6px",color:"rgba(0,0,0,0.5)"})
            this.setFirstLevelMenuActive()

            //设置chat未读数字
            mailboxList().then((response) => {
                this.mailbox = []
                let data = response.data.mailbox_list
                let total = 0
                let unseenNum = []
                for (let i = 0; i < data.length; i++) {
                    let name = data[i].name.split('@')[0]
                    this.mailbox.push({name: name, to: {name: 'Chat', params: {mailbox: data[i].name}}})
                    total += data[i].unseen_num__sum
                    data[i].unseen_num__sum ? unseenNum.push(data[i].unseen_num__sum) : unseenNum.push(0)
                }
                this.mailbox.unshift({name: 'All', to: {name: 'Chat', params: {mailbox: 'all'}}})
                unseenNum.unshift(total)
                let overview = this.$store.state.overview
                overview.new_mail_num = unseenNum
                this.$store.commit('SET_OVERVIEW', overview)
                this.$nextTick(() => this.setFirstLevelMenuActive())
            }).catch((error) => console.log(error))
        },
        methods: {
            /**
             * 自动为第一层菜单添加active class
             */
            setFirstLevelMenuActive() {
                let activeRoute = $("#side-menu .router-link-active")
                $("#side-menu >li a").removeClass("active")
                while (activeRoute.parent().length && activeRoute.parent().attr('id') !== 'side-menu') {
                    activeRoute = activeRoute.parent()
                }
                activeRoute.length && activeRoute.find("a").eq(0).addClass('active')
            }
        }
    }
</script>

<style scoped lang="stylus">
    #side-menu
        .router-link-active
            a
                color: #1e88e5 !important;
                font-weight: 500 !important;;
</style>
